<template>
    <div class="customer container">
            <router-link to="/" class="btn btn-default">返回</router-link>
            <h4 class="page-header">
                <span class="glyphicon glyphicon-user"></span> {{customer.name}}

                <span class="pull-right">
                    <router-link class="btn btn-primary" :to="'/a/'+customer.id">
                    编辑
                    </router-link>
                    <button class="btn btn-danger" @click="deleteCustomer(customer.id)">
                        删除
                    </button>
                </span>
                </h4>
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-phone"> {{customer.phone}}</span>
                </li>
               <li class="list-group-item">
                    <span class="glyphicon glyphicon-envelope"> {{customer.email}}</span>
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-education"> {{customer.education}}</span>
                </li>
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-oil"> {{customer.graduationSchool}}</span>
                </li>
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-folder-close"> {{customer.profession}}</span>
                </li>
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-pencil"> {{customer.profile}}</span>
                </li>
            </ul>
    </div>
</template>

<script>
export default {
        name: "customer",
        data() {
            return {
                customer: ""
            };
        },
        created() {
            this.funCustomers(this.$route.params.id);
        },
        methods: {
            funCustomers(id) {
            this.$http.get("http://localhost:3010/users/" + id).then(function(response) {
                    this.customer = response.body;
                });
            },
            deleteCustomer(id){
                this.$http.delete("http://localhost:3010/users/" + id).then(function(response){
                    if(response.ok == true){
                        this.$router.push({
                             path:"/",query:{alert:"用户信息删除成功！"}
                        })
                    }
                })
            }
        }
    };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
